@import "../../../../../../styles/variables.less";

.tab-p {
    display         : flex;
    width           : 100%;
    align-items     : center;
    background-color: #fff;

    .tab-item {
        padding   : 18px;
        cursor    : pointer;
        position  : relative;
        transition: color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);

        &::after {
            display         : inline-block;
            content         : '';
            position        : absolute;
            bottom          : 0;
            left            : 50%;
            width           : 0;
            height          : 2px;
            background-color: @primary-color;
            transition      : width 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
            transform       : translateX(-50%);
            opacity         : 0;
        }

        &.selected {
            color: @primary-color;

            &::after {
                width  : 24px;
                opacity: 1;
            }
        }
    }
}

.flag-icon {
    width           : 4px;
    height          : 16px;
    background-color: @primary-color;
}

.divider {
    margin          : 0;
    top             : 0;
    background-color: #ccc;
}